From 5b6639a3cf9b6c63045cb82e6ef1a43b0742c367 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 9 Mar 2022 00:38:02 +0100 Subject: feat: provide pagination for users with js disabled (#13) * chore: add a Pagination component * chore: add blog pages * chore: fallback to page number based navigation if JS disabled * chore: update translation --- src/pages/blog/page/[id].tsx | 195 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 src/pages/blog/page/[id].tsx (limited to 'src/pages/blog/page/[id].tsx') diff --git a/src/pages/blog/page/[id].tsx b/src/pages/blog/page/[id].tsx new file mode 100644 index 0000000..3be058b --- /dev/null +++ b/src/pages/blog/page/[id].tsx @@ -0,0 +1,195 @@ +import { getLayout } from '@components/Layouts/Layout'; +import Pagination from '@components/Pagination/Pagination'; +import PostHeader from '@components/PostHeader/PostHeader'; +import PostsList from '@components/PostsList/PostsList'; +import Sidebar from '@components/Sidebar/Sidebar'; +import { ThematicsList, TopicsList } from '@components/Widgets'; +import { + getAllThematics, + getAllTopics, + getEndCursor, + getPostsTotal, + getPublishedPosts, +} from '@services/graphql/queries'; +import { NextPageWithLayout } from '@ts/types/app'; +import { BlogPageProps } from '@ts/types/blog'; +import { settings } from '@utils/config'; +import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n'; +import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; +import Head from 'next/head'; +import { useRouter } from 'next/router'; +import Script from 'next/script'; +import { useIntl } from 'react-intl'; +import { Blog, Graph, WebPage } from 'schema-dts'; +import styles from '@styles/pages/Page.module.scss'; +import { getFormattedPageNumbers } from '@utils/helpers/format'; +import { useEffect } from 'react'; + +const BlogPage: NextPageWithLayout = ({ + allThematics, + allTopics, + posts, + totalPosts, +}) => { + const intl = useIntl(); + const router = useRouter(); + const pageNumber = Number(router.query.id); + + useEffect(() => { + if (router.query.id === '1') router.push('/blog'); + }, [router]); + + const pageTitle = intl.formatMessage( + { + defaultMessage: `Blog - Page {number} - {websiteName}`, + description: 'BlogPage: SEO - Page title', + }, + { number: pageNumber, websiteName: settings.name } + ); + const pageDescription = intl.formatMessage( + { + defaultMessage: + "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.", + description: 'BlogPage: SEO - Meta description', + }, + { websiteName: settings.name } + ); + const pageUrl = `${settings.url}${router.asPath}`; + + const webpageSchema: WebPage = { + '@id': `${pageUrl}`, + '@type': 'WebPage', + breadcrumb: { '@id': `${settings.url}/#breadcrumb` }, + name: pageTitle, + description: pageDescription, + inLanguage: settings.locales.defaultLocale, + reviewedBy: { '@id': `${settings.url}/#branding` }, + url: `${settings.url}`, + isPartOf: { + '@id': `${settings.url}`, + }, + }; + + const blogSchema: Blog = { + '@id': `${settings.url}/#blog`, + '@type': 'Blog', + author: { '@id': `${settings.url}/#branding` }, + creator: { '@id': `${settings.url}/#branding` }, + editor: { '@id': `${settings.url}/#branding` }, + inLanguage: settings.locales.defaultLocale, + license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr', + mainEntityOfPage: { '@id': `${pageUrl}` }, + }; + + const schemaJsonLd: Graph = { + '@context': 'https://schema.org', + '@graph': [webpageSchema, blogSchema], + }; + + const title = intl.formatMessage({ + defaultMessage: 'Blog', + description: 'BlogPage: page title', + }); + + return ( + <> + + {pageTitle} + + + + + + +